<template>
    <div class="index">
        <Header></Header>
        <div class="main">
            <p class="current-nav">
                当前位置 :
                <router-link to="index">首页</router-link>
                <i>></i>
                <a>风险评估及资源调查</a>
                <i>></i>风险信息
            </p>

            <div class="infor risk2">
                <!-- <p class="title">风险信息</p> -->
                <ul class="clearfix steps">
                    <li class="steps-active" @click="goToPage(1)">
                        <span>1</span>
                        <p>风险信息</p>
                        <p class="info_note clearfix">
                            <i class="el-icon-warning-outline"></i>
                            <span
                                ><strong>（备案材料之一）</strong
                                >请上传单位涉及的风险信息，且须与应急预案中的保持一致；若为word，可直接上传，若为excel，需下载模板填写后上传。</span
                            >
                        </p>
                    </li>
                    <li @click="goToPage(1)">
                        <span>2</span>
                        <p>应急资源信息</p>
                        <p class="info_note clearfix">
                            <i class="el-icon-warning-outline"></i>
                            <span
                                ><strong>（备案材料之一）</strong
                                >请正确填写应急资源信息，该信息会自动更新到应急资源调查报告中！</span
                            >
                        </p>
                    </li>
                </ul>
                <div class="form-container">
                    <div class="risk-title">
                        <p>风险库</p>
                        <div>
                            <el-upload
                                action=""
                                :http-request="newload"
                                class="fr"
                            >
                                <el-button class="grp1">
                                    <i class="el-icon-upload2">上传</i>
                                </el-button>
                            </el-upload>
                            <a
                                download
                                href="../../../static/企业风险信息表模板.xlsx"
                                class="uploadBtn fr"
                                ><i class="el-icon-download">模板下载</i></a
                            >
                            <!-- <el-button class="sure">
                                <i class="el-icon-download">模板下载</i>
                            </el-button> -->
                        </div>
                    </div>
                    <el-table
                        ref="multipleTable"
                        :data="contentList"
                        tooltip-effect="dark"
                        v-loading.fullscreen.lock="loading"
                        :element-loading-text="wordmsg"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                            type="index"
                            align="center"
                            label="序号"
                        ></el-table-column>
                        <!--	<el-table-column label='' type="selection"  align='center'>
                        </el-table-column>-->
                        <el-table-column
                            prop="originalFileName"
                            label="文件名称"
                            :show-overflow-tooltip="true"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            prop="fileSize"
                            label="大小"
                            :show-overflow-tooltip="true"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    scope.row.fileSize | sizechange
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="createUser"
                            label="上传人"
                            :show-overflow-tooltip="true"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            prop="operTime"
                            label="上传时间"
                            :show-overflow-tooltip="true"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    scope.row.createTime | timechange
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="320px"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    class="detail-btn"
                                    @click="lookdetail(scope.row)"
                                >
                                    <i class="el-icon-search">查看</i>
                                </el-button>
                                <el-button
                                    class="detail-btn"
                                    @click="uploadDetail(scope.row)"
                                >
                                    <i class="el-icon-upload2">导出</i>
                                </el-button>
                                <el-button
                                    class="detail-btn"
                                    @click="deletedetail(scope.row)"
                                >
                                    <i class="el-icon-delete">删除</i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <div class="page-container">
                        <el-pagination
                            @current-change="lookrecordList"
                            :current-page.sync="pageIndex"
                            :page-size="pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="total"
                        ></el-pagination>
                        <el-button>确定</el-button>
                    </div> -->

                    <div
                        class="bts clearfix"
                        style="margin:30px auto 0;width:136px;"
                    >
                        <!--<el-button @click="resetForm('ruleForm')" class='cancel'>保存</el-button>-->
                        <el-button
                            type="primary"
                            @click="submitForm('ruleForm')"
                            class="sure surell"
                            >下一步</el-button
                        >
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="riskTit" :visible.sync="riskVisible" width="900px">
            <template v-if="fileType == 2">
                <el-table
                    ref="multipleTable"
                    :data="riskVisibleList"
                    tooltip-effect="dark"
                    style="width:100%;"
                >
                    <el-table-column
                        type="index"
                        align="center"
                        label="序号"
                    ></el-table-column>
                    <el-table-column
                        prop="riskFactors"
                        :show-overflow-tooltip="true"
                        label="危险因素"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="riskDesc"
                        label="危险原因"
                        :show-overflow-tooltip="true"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="dangerConsequence"
                        label="危害后果"
                        :show-overflow-tooltip="true"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="ccontrolMeasures"
                        label="预控措施"
                        :show-overflow-tooltip="true"
                        align="center"
                    ></el-table-column>
                </el-table>

                <div>
                    <el-pagination
                        @current-change="getLookdetail"
                        :current-page.sync="pageIndex1"
                        :page-size="pageSize1"
                        layout="total, prev, pager, next, jumper"
                        :total="total1"
                    ></el-pagination>
                </div>
            </template>
            <template v-else>
                <div class="wordTc">
                    <p v-for="(item, index) in riskDescList" :key="index">
                        {{ item.riskDesc }}
                    </p>
                </div>
            </template>
        </el-dialog>
        <Footer />
    </div>
</template>

<script>
import Header from "../common/header";
import Footer from "../common/footer";
export default {
    components: {
        Header,
        Footer
    },
    data () {
        return {
            riskVisible: false,
            riskTit: '',
            editValue: "修改",
            multipleSelection: [],
            currentPage: 1,
            pageIndex: 1,
            pageSize: 10,
            searchType: 2,
            total: 0,
            pageIndex1: 1,
            pageSize1: 10,
            total1: 0,
            wordmsg: "",
            loading: false,
            levelfirst: [],
            leveltwo: [],
            levelthree: [],
            dataList: [],
            riskList: [],
            region: "",
            region1: "",
            region2: "",
            inputUserperson: "",
            saveList: "",
            dangerSourceId: "",
            emergenciesTypeId: "",
            contentList: [],
            selectList: [],
            selectNumber: 0,
            modifyId: "",
            riskVisibleList: [],
            uploadRecordId: '',
            fileType: '',
            riskDescList: [],
            navChildren: []
        };
    },
    created () {
        this.navChildren = JSON.parse(this.$route.query.navChildren)
        this.lookrecordList()
    },
    methods: {
        goToPage (index) {
            this.$router.push({
                path: this.navChildren[index].menuUrl,
                query: {
                    navIndex: this.$route.query.navIndex,
                    navChildren: this.$route.query.navChildren
                }
            })
        },
        lookrecordList () {
            //查看上传列表
            let params = {
                companyId: JSON.parse(localStorage.getItem('user')).companyId,
                uploadType: '5',
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }
            this.$axios({
                method: "post",
                url: this.$baseUrl + "emergency/v2.0/equipment/queryuploadfilerecords",
                data: params
            }).then(res => {
                if (res.data.data) {
                    this.contentList = res.data.data.records;
                    this.total = res.data.data.total * 1
                } else {
                    this.contentList = [];
                }
            });
        },

        newload (fileObj) {
            //导入风险信息
            var typeList = ['.doc', '.docx', '.xls', '.xlsx']
            var str = fileObj.file.name
            var type = '.' + str.split('.')[1]
            if (typeList.indexOf(type) != -1) {
                let url =
                    this.$baseUrl +
                    "emergency/v2.0/risk/import";
                var fd = new FormData();
                if (type == '.doc' || type == '.docx') {
                    type = 1
                } else {
                    type = 2
                }
                fd.append("file", fileObj.file);
                fd.append("fileType", type);
                fd.append(
                    "userName",
                    JSON.parse(localStorage.getItem("user")).userAccount
                );
                fd.append('businessId', localStorage.businessId)
                fd.append('companyId', JSON.parse(localStorage.getItem("user")).companyId)
                let config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                };
                this.wordmsg = "上传中";
                this.loading = true;
                this.$axios.post(url, fd, config).then(res => {
                    console.log(res);
                    this.loading = false;
                    if (res.data.meta.success) {
                        this.$message({
                            message: "上传成功",
                            type: "success"
                        });
                        this.lookrecordList();
                    } else {
                        if (type == 1) {
                            this.$message.error("上传失败");
                        } else {
                            this.$message.error("上传的excel表格数据为空或excel表格数据格式错误");
                        }
                    }
                });
            } else {
                this.$message.error("请上传word文档或者excel文档");
            }
        },
        uploadDetail (row) {
            // console.log(row.id)
            this.$axios
                .get(this.$baseUrl + 'emergency/v2.0/company/risk/export/' + row.id)
                .then(res => {
                    var timestamp = Date.parse(new Date());
                    var browserIsIe = this.browserIsIe();
                    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                    save_link.href = res.data.data
                    save_link.download = timestamp;
                    var event = document.createEvent('MouseEvents');
                    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    save_link.dispatchEvent(event);
                    return false;
                })
        },
        browserIsIe () {
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                return true;
            } else {
                return false;
            }
        },
        lookdetail (row) {
            //查看上传的数据
            this.riskTit = row.originalFileName.split('.')[0]
            var type = row.originalFileName.split('.')[1]
            if (type == 'doc' || type == 'docx') {
                this.fileType = 1
                this.pageSize1 = 10000
            } else {
                this.fileType = 2
            }
            // console.log(this.fileType)
            this.riskVisible = true
            this.uploadRecordId = row.id
            this.getLookdetail()
        },
        getLookdetail () {
            //获取上传详情内容
            let params = {
                companyId: JSON.parse(localStorage.getItem('user')).companyId,
                pageIndex: this.pageIndex1,
                pageSize: this.pageSize1,
                uploadRecordId: this.uploadRecordId
            }
            this.$axios({
                method: "post",
                url: this.$baseUrl + "emergency/v2.0/view/risk/list",
                data: params
            }).then(res => {
                if (res.data.data) {
                    this.riskVisibleList = res.data.data.records;
                    this.total1 = res.data.data.total * 1
                    this.riskDescList = res.data.data.records
                } else {
                    this.riskVisibleList = [];
                }
            });
        },
        deletedetail (file) {
            //删除上传数据
            this.$axios({
                method: "get",
                url: this.$baseUrl + "emergency/v2.0/company/risk/delete/" + JSON.parse(localStorage.getItem("user")).companyId + '/' + file.id
            })
                .then(res => {
                    if (res.data.meta.success) {
                        this.lookrecordList();
                        this.$message.success('删除成功')
                    } else {
                        this.$message.warning(res.data.meta.message)
                    }
                })
                .catch(response => {
                    console.log(response);
                });
        },
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange (val) {
            console.log(`当前页: ${val}`);
        },
        submitForm () {
            if (this.contentList.length > 0) {
                this.$router.push({ path: 'resources2', query: { navIndex: 2 } })
            } else {
                this.$message.warning('请上传风险信息！')
            }
        },
        onSubmit () {
            console.log("submit!");
        },
        handleSelectionChange (val) {
            this.multipleSelection = val;
            this.$store.state.riskList = val;

            this.selectNumber =
                this.selectList.length + this.multipleSelection.length;
            window.localStorage.setItem(
                "newList",
                JSON.stringify(this.multipleSelection)
            );
        }
    },
    filters: {
        sizechange (val) {
            if (!val) {
                return "";
            }
            var num = 1024;
            if (val < 1024) {
                return val + "k";
            } else {
                return (val / num).toFixed(2) + "M";
            }
        },
        timechange (val) {
            if (!val) {
                return "";
            }
            return val.substring(0, 19);
        },

        timeselect (val) {
            if (!val) {
                return false;
            }
            let DateS = new Date();
            let newDate = new Date(val);

            let num = (DateS - newDate) / 1000 / 60;
            if (num > 1) {
                return false;
            } else {
                return true;
            }
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.risk2 {
    .form-container {
        padding: 50px 0 70px;
        margin: 0 auto;
        .el-table {
            width: calc(100% - 200px);
            margin: 0 auto;
            border-top: 1px solid #ebeef5;
        }
        .el-button:hover {
            opacity: 0.8;
        }
        .risk-title {
            position: relative;
            margin: 66px 0 25px;
            p {
                font-size: 24px;
                font-weight: 900;
                color: #333333;
                text-align: center;
            }
            > div {
                overflow: hidden;
                width: 100%;
                height: 40px;
                padding: 0 100px;
                .el-button {
                    width: 80px;
                    background: #f8f7ff;
                    border: 0;
                    border-radius: 6px;
                    margin-right: 4px;
                    float: right;
                    font-size: 14px;
                    color: #6492ff;
                }
                .el-button.sure {
                    color: #fff;
                    background: #4080ff;
                   /* background: linear-gradient(
                        90deg,
                        #6eb1ff 20%,
                        #3372ff 80%
                    );*/
                    width: 120px;
                    margin-right: 10px;
                }
                a.uploadBtn {
                    display: block;
                    color: #fff;
                    background: #4080ff;
                /*    background: linear-gradient(
                        90deg,
                        #6eb1ff 20%,
                        #3372ff 80%
                    );*/
                    width: 120px;
                    margin-right: 10px;
                    border-radius: 6px;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;
                }
                a.uploadBtn:hover {
                    opacity: 0.8;
                }
                > .selectL {
                    height: 40px;
                    width: 200px;
                    float: left;
                    > span {
                        color: #409eff;
                    }
                }
            }
        }
        .el-form {
            width: 790px;
            height: 36px;
            margin: 0 auto;
            .el-input {
                width: 182px;
                margin-right: 12px;
            }
            .el-button {
                width: 80px;
                height: 36px;
                border-radius: 6px;
                padding: 0;
                color: #fff;
                text-align: left;
                img {
                    width: 18px;
                    margin: 0 4px 0 12px;
                }
            }
            .el-button.sure {
                color: #fff;
                background: #4080ff;
               /* background: linear-gradient(90deg, #6eb1ff 20%, #3372ff 80%);*/
            }
            .el-button.sure:hover {
                opacity: 0.8;
            }
            .el-input__inner {
                height: 36px;
                line-height: 36px;
            }
        }
    }
    .el-upload-list {
        display: none;
    }
}
.wordTc {
    min-height: 240px;
    padding: 0 20px;
}
</style>
